﻿
@{
    ViewBag.Title = "CascadeSelector";
}
@section styles{

    <link href="~/Areas/JQuery/Content/Home/CascadeSelector.css" rel="stylesheet" />
}
@section scripts{
    <script src="~/Areas/JQuery/Scripts/Home/CascadeSelector.js"></script>
}
<h2>CascadeSelector</h2>
<ol>
    <li>
        jQuery选择器-位置选择器
        <ol>
            <li>jQuery同样允许我们根据元素的位置来选择元素</li>
            <li>
                位置选择器语法如下：
                <ol>
                    <li>$基本选择器：位置选择器</li>
                </ol>
            </li>
            <li>
                常用的位置选择器
                <ol>
                    <li>
                        选择第一个
                        <ol>
                            <li>格式：$("selector:first")</li>
                        </ol>
                    </li>
                    <li>
                        选择最后一个
                        <ol>
                            <li>
                                格式：$("selector:last")
                            </li>
                        </ol>
                    </li>
                    <li>
                        选择奇数行
                        <ol>
                            <li>格式：$("selector:odd")</li>
                        </ol>
                    </li>
                    <li>
                        选择偶数行
                        <ol>
                            <li>格式：$("selector:even")</li>
                        </ol>
                    </li>
                    <li>
                        获取指定位置
                        <ol>
                            <li>格式：$("selector:eq(n)")</li>
                        </ol>
                    </li>
                    <li>
                        大于指定位置
                        <ol>
                            <li>格式：$("selector:gt(n)")</li>
                        </ol>
                    </li>
                    <li>
                        小于指定位置
                        <ol>
                            <li>格式：$("selector:lt(n)")</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-层叠选择器
        <ol>
            <li>
                如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素，兄弟元素等，那么层叠选择器是一个非常好的选择。
            </li>
            <li>
                层叠选择器语法如下：
                <ol>
                    <li>"基准元素 层叠符号 目标元素"</li>
                </ol>
            </li>
            <li>
                层叠选择器的用法
                <ol>
                    <li>
                        后代选择器
                        <ol>
                            <li>格式：$("ancestor descendant")</li>
                        </ol>
                    </li>
                    <li>
                        子选择器
                        <ol>
                            <li>格式：$("parent>child")</li>
                        </ol>
                    </li>
                    <li>
                        相邻选择器
                        <ol>
                            <li>格式：$("prev+next")</li>
                        </ol>
                    </li>
                    <li>
                        兄弟选择器
                        <ol>
                            <li>格式：$("prev~siblings")</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-内容选择器
        <ol>
            <li>jQuery选择器的四种用法
                 <ol>
                     <li>
                         内容选择器
                         <ol>
                             <li>选取含有文本内容为"text"的元素</li>
                             <li>格式：E:contains(text)</li>
                         </ol>
                     </li>
                     <li>
                         包含元素选择器
                         <ol>
                             <li>选取含有选择器所匹配的元素的元素</li>
                             <li>格式：has(selector)</li>
                         </ol>
                     </li>
                     <li>
                         空内容选择器
                         <ol>
                             <li>选取不含任何子元素或文本的空元素</li>
                             <li>格式：E:empty</li>
                         </ol>
                     </li>
                     <li>
                         非空内容选择器
                         <ol>
                             <li>选取含有子元素或者文本的元素标签</li>
                             <li>格式：E:parent</li>
                         </ol>
                     </li>
                 </ol>
            </li>
        </ol>
    </li>
    <li>
        表单元素选择器
        <ol>
            <li>表单元素选择器是指用于获取指定表单元素的的选择器，表单元素选择器用于间化表单操作。</li>
        </ol>
    </li>
</ol>
<div id="divHtml"></div>
<div id="divText"></div>